<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>URS.AI</title>
	<link rel="stylesheet" href="css/jquery.fullPage.css">
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/jquery.fullPage.js"></script>
	<script src="js/index.js"></script>
</head>

<body>
	<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls" src="./audio/page.mp3">
	</audio>
	<audio id='click_audio_list' preload="auto" controls="controls" src="./audio/click.wav">
	</audio>
	<!-- 导航 -->
	<div id="header">
		<div class="nav">
			<!-- <a href="" class="mala-logo mala-fl"></a> -->
			<div class="mala-fl"></div>
			<div class="nav-help">
				<ul class="mala-nav-list mala-clearfix">
					<li class="mala-nav-item mala-fl" style="border-bottom: 2px solid #fff;">
						<a class="mala-nav-link">
							Home</a>
					</li>
					<li class="mala-nav-item mala-fl">
						<a href="about.html" class="mala-nav-link">
							About US</a>
					</li>
					<!-- <li class="mala-nav-item mala-fl">
						<a href="" class="mala-nav-link">
							Projects</a>
					</li>
					
					<li class="mala-nav-item mala-fl">
						<a href="" class="mala-nav-link">
							Contact</a>
					</li>
					<li class="mala-nav-item mala-fl">
						<a href="" class="mala-nav-link">
							Blog</a>
					</li>
					<li class="mala-nav-item mala-fl">
						<a href="" class="mala-nav-link mala-nav-link-lang">
						</a>
					</li> -->
				</ul>
			</div>
			<div class="clear"></div>
		</div>
	</div>

	<!-- 另外一种粒子 -->
	<!-- <div id="particles-js">
					<canvas class="particles-js-canvas-el"></canvas>
				</div> -->

	<!-- 底部滚动 -->
	<div class="bottom1">
		<div class="bottom1_top">
			<img src="images/twitter.png" class="img_1">
			<img src="images/DiscordLogo.png" class="img_1">
			<img src="images/Medium.png" class="img_1">
			<!-- <img src="images/instagram.png" class="img_1"> -->
		</div>
		<div class="img_mouse">
			<img src="images/mouse.png">
			<img src="images/keyboard.png" class="img_keyboard">
		</div>
	</div>
	<!-- <img src="images/backImg.png" class="cen_back"> -->
	<!-- back0 -->
	<div id="lizhi" class="back0">
			<!-- id="ticker" -->

		<div class="title1 ">
			<h4 id="text_0" class="title1_tit"> Your creativity, our protocol, <br> limitless possibilities.</h4>
			<p id="textp_0" class="title1_in">
				<i class="left-border"></i> Yours Protocol streamlines
				Al Character creation through a <span
					style="font-weight: 600;color:#3BF3FF">collaborative approach</span>, making it
				easier than ever to bring your
				characters to life
			</p>
		</div>

		<div class="cent1 lizhi_center">
			<video id="video_cent1" autoPlay="autoplay" class="video_cent" src="./video/B001.mp4" muted preload="auto"
				loop width="100%" height="600px"><video>
		</div>
		<div class="video_interact" id="video_interact">
			Click to interact
		</div>


	</div>
	<!-- 导航结束 -->
	<div class="box">
		<!-- <div id="lizhi"></div> -->
		<div id="dowebok">
			<!-- back1 -->
			<div class="section back1 ">

				<div class="cent_box2">
					<div class="cent_2 cent_2_l">
						<h4 class="cent_2_tit">YOUR Creation with <br> <span
								style="font-size: 22px;font-weight: 600;font-family: DINFont_BO;color: #3BF3FF;">Total Flexibility and Autonomy</span> </h4>
						<p class="cent_2_p" style="padding-left: 60px;">
							Users can set: basic traits, self-awareness, conversation logic, worldview, and more <br>
							All settings for YOUR AI Characters will be <br> published onchain to ensure nothing is lost
						</p>
					</div>
					<div class="cent_2 cent_2_r">
						<h4 class="cent_2_tit">Benefit from collective <br> <span
								style="font-size: 24px;font-weight: 600;font-family: DINFont_BO;color: #3BF3FF;"> UGI (User Generated
								Intelligencel)</span></h4>
						<p class="cent_2_p">
							With everything put on-chain, Yours Protocol enales trustless and permissionless tailoring of prompts
							 <br>
							 Community-built ecosystem brings AI Characters to life with richer and more nuanced personalities
						</p>
					</div>
				</div>
				<div class="cent_2_v_box">
					<video id="video_cent_2" class="cent_2_video" src='./video/C002.mp4' autoPlay="autoplay" muted preload="auto" loop width="100%" height="700px">
						<source autoplay type="video/.mp4">
						<video>
							
				</div>
				<div class="video_interact_2 " id="video_interact_2">
					Click to interact
				</div>

			</div>
			<!-- back2 -->
			<div class="section back2 ">

					<!-- <div id="video_l2" class="video_l1"></div>
					<div id="video_r2" class="video_r1"></div> -->

				<div class="video_cen3">
					
					<video id="video_cent_3" src='./video/A001.mp4' autoPlay="autoplay" muted preload="auto" loop width="600px" >
						<source autoplay type="video/.mp4">
						<video>
							
				</div>
				<div class="video_interact_3 " id="video_interact_3">
					Click to interact
				</div>
				<div class="title3">
					
					<h4 id="text_1" class="title3_tit">Everlasting Stability</h4>
					<p id="textp_1" class="title3_in">
						<i class="left-border"></i> Imagine creating something that will <span
						style="font-weight: 600;font-family: DINFont_BO;color: #3BF3FF;">last forever.</span> 
							On-chain protocols offer that possibility for YOUR AI characters to stand the test of time and always evolving
					</p>
					<h4  class=" title3_tit_2">Easy Tailoring</h4>
					<p class=" title3_in_2">
						<i class="left-border"></i> Making YOUR perfect AI character <span
						style="font-weight: 600;font-family: DINFont_BO;color: #3BF3FF;"> has never been easier! </span> 
						Directly chat with others' characters OR easily build upon them to create one that fits YOUR exact needs
					</p>
				</div>
				

			</div>

			<!-- back3 -->
			<div class="section back3">
				<div class="title4">
					<h4 id="text_4" class="title4_tit">Alone we can do so little, together we can do so much.</h4>
					<p id="textp_4" class="title4_in">
						Join the first <span
						style="font-weight: 600;font-family: DINFont_BO;color: #3BF3FF;"> community-driven </span> <br> UGI ecosystem today to unlock new
						possibilities with YOUR AIcharacters.
					</p>
					<div class="text_4_but " >
						Be the first to experience our MVP - Sign Up Now!
					</div>
				</div>
				<!-- <div class="cent_4 video_cent_4">
					<div class="video_interact_4 " id="video_interact_4">
						Click to interact
					</div>
					<video id="video_cent_4" autoPlay="autoplay" muted preload="auto" loop width="100%" height="920px">
						<source autoplay type="video/.mp4">
						<video>
				</div> -->

			</div>

			<!-- 占位i -->
			<div class="section back4"></div>

		</div>
	</div>


</body>

<script>

	// 鼠标点击
	document.addEventListener('click', function () {
		var audio = document.getElementById('click_audio_list')
		audio.currentTime = 0
		audio.play();
	});


	function videoDomMouse(item, item_l, item_r) {
		$(item_l).mouseover(function (e) {
			item.playbackRate = 4

		})
		$(item_l).mouseleave(function (e) {
			item.playbackRate = 1

		})

		function windBackward() {
			if (item.currentTime <= 1 / 12) {
				clearInterval(intervalBwd);
			} else {
				item.currentTime -= 1 / 12;
			}
		}
		$(item_r).mouseover(function (e) {
			// item.playbackRate = -4
			item.pause();
			intervalBwd = setInterval(windBackward, 10);

		})
		$(item_r).mouseleave(function (e) {
			clearInterval(intervalBwd);
			item.play();

		})
	}

	// 处理区域鼠标滚动-video_l1
	$(document).ready(function () {
		var video_1 = document.getElementById("video_cent1");
		var video_2 = document.getElementById("video_cent2");
		var video_3 = document.getElementById("video_cent3");

		videoDomMouse(video_1, "#video_r1", "#video_l1")
		videoDomMouse(video_2, "#video_r2", "#video_l2")
		videoDomMouse(video_3, "#video_r3", "#video_l3")

	});


	// 打字
	// $(function () {
	// 	$("#textp_0").ticker({
	// 		cursorList: " ",
	// 		rate: 20,
	// 		delay: 1000,
	// 	}).trigger("play").trigger("stop");
	// });



</script>

<!-- 字体效果 -->
<script src="js/fonts_anim.js"></script>


<!-- 打字机效果 -->
<script type="text/javascript" src="js/jticker_split.js"></script>

<!-- home -->
<!-- <script type="module" src="js/home_script.js"></script> -->
<!-- <script type="" src="js/home_scrollReveal.js"></script> -->
<!-- home end -->
<script src="js/lizi.js"></script>
<script src='js/three.min.js'></script>
<script src="js/script.js"></script>

</html>